<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
     <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
     <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
     <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    <title>p63-64发表评论功能</title>
</head>
<body>
    <div id="app">
        <commentbox @addeven="addlist"></commentbox>
        <ul class="list-group">
            <li class="list-group-item" v-for="item in list" :key="item.id">
                <span class="badge">{{item.user}}</span>
                {{item.content}}
            </li>
        </ul>
    </div>
    <template id="tmp1">
        <div>
            <div class="form-group">
                <label>评论人：</label>
                <input type="text" class="form-control" v-model="user">
            </div>
            <div class="form-group">
                <label>评论内容：</label>
                <textarea  class="form-control" v-model="content"></textarea>
            </div>
            <div class="form-group">
                <input type="button" value="发表评论" class="btn btn-primary" @click="postcontent">
            </div>
        </div>
    </template>
    <script>
        var commentbox={
            template:"#tmp1",
            data(){
                return {
                    user:"",
                    content:""
                }
            },
            methods:{
                postcontent(){
                    var comment={
                        id:Date.now(),
                        user:this.user,
                        content:this.content
                    }
                    var list=JSON.parse(localStorage.getItem("ctms")||"[]");
                    list.unshift(comment);
                    localStorage.setItem("ctms",JSON.stringify(list));

                    this.$emit("addeven",comment);

                    this.user=this.content=""
                }
            }
        }
        var vm=new Vue({
            el:"#app",
            created(){
                this.getInfo();
            },
            data:{
                list:[
                    {id:1,user:"李白",content:"天生我材必有用"},
                    {id:2,user:"杜甫",content:"劝君共进一杯酒"},
                    {id:3,user:"李清照",content:"风吹草地见牛羊"}
                ]
            },
            methods:{
                getInfo(){
                    var list=JSON.parse(localStorage.getItem("ctms")||"[]");
                    this.list=list;
                },
                addlist(comment){
                    this.list.unshift(comment)
                }
            },
            filters:{},
            directives:{},
            components:{
                commentbox
            }
        })
    </script>
</body>
</html>